import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { SaleDto } from '@/api/sale/types'
import { Popover, Select } from 'ant-design-vue'
import type { SelectValue } from 'ant-design-vue/es/select'
import { CaretDownOutlined } from '@ant-design/icons-vue'

@Component
export class SelectSaler extends Render {
    @Prop({ default: '' }) name!: number
    @Prop({ default: () => [] }) salesList!: SaleDto[]

    @Emit('salerChange')
    handleChange(value: SelectValue) {
        return value
    }
    saleId = null

    onChange(value: SelectValue) {
        this.handleChange(value)
    }

    filterOption(input:string, option: SaleDto) {
        return option.saleName.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }

    render() {
        return (
            <div>
                <Popover
                    placement="bottom"
                    trigger="click"
                    v-slots={{
                        default: () => {
                            return (
                                <div class="flex items-center cursor-pointer">
                                    <div class="mr-6px">{this.name || '暂未分配负责人'}</div>
                                    <CaretDownOutlined />
                                </div>
                            )
                        },
                        content: () => {
                            return <Select
                                v-model={this.saleId}
                                placeholder="搜索姓名"
                                showSearch
                                class="w-200px"
                                onChange={this.onChange}
                                options={this.salesList}
                                filterOption={(val, option) => this.filterOption(val, option as SaleDto)}
                                fieldNames={{
                                    label: 'saleName',
                                    value: 'saleId',
                                }}
                            >
                            </Select>
                        }
                    }}
                >
         
                </Popover>
            </div>
        )
    }
}

export default toNative<
    { name: string; salesList: SaleDto[] },
    {
        salerChange: (value: number) => void
            }
            >(SelectSaler)
